<template>
	<div style="height: 100%;" v-loading="loading">

		<div style="padding:0 10px;border-radius: 8px;border: 1px solid#f5f5f5;" class="displayFlexBet bgfff">
			<div>
				<!-- <el-select v-model="value" placeholder="区域" style="width: 150px;">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select> -->
			</div>

			<div class="displayFlex" style="color: #888888;">
				<div class="mr30 point" style="position: relative;line-height: 60px;"
					@click="selectItem = {code:'',label:'总览'},getGasOnlineLatestMonitorList()">
					<div :class="[selectItem.code == ''?'selected':'']">总览</div>
					<div :class="[selectItem.code == ''?'selectedBorder':'']"></div>
				</div>
				<div class="mr30 point" style="position: relative;line-height: 60px;"
					@click="selectItem = {code:'CEMS',label:'CEMS'},dataList = dataList2,formLineChart(),getGasOnlineLatestMonitorList()">
					<div :class="[selectItem.code == 'CEMS'?'selected':'']">CEMS</div>
					<div :class="[selectItem.code == 'CEMS'?'selectedBorder':'']"></div>
				</div>
				<div class="mr30 point" style="position: relative;line-height: 60px;"
					@click="selectItem = {code:'TSP',label:'TSP'},dataList = dataList4,formLineChart(),getGasOnlineLatestMonitorList()">
					<div :class="[selectItem.code == 'TSP'?'selected':'']">TSP</div>
					<div :class="[selectItem.code == 'TSP'?'selectedBorder':'']"></div>
				</div>
				<div class="point" style="position: relative;line-height: 60px;"
					@click="selectItem = {code:'AIR_SITE',label:'空气微站'},dataList = dataList5,formLineChart(),getGasOnlineLatestMonitorList()">
					<div :class="[selectItem.code == 'AIR_SITE'?'selected':'']">空气微站</div>
					<div :class="[selectItem.code == 'AIR_SITE'?'selectedBorder':'']"></div>
				</div>
			</div>
			<div style="width: 150px;"></div>
		</div>

		<div style="display: flex;" class=" mt10">
			<div style="border-radius: 8px;border: 1px solid#f5f5f5;flex:2">
				<el-empty v-if="dataList1.length == 0" />
				
				<div v-for="(item,index) in dataList1" :key="index" class=" bgfff mb10 bra8 point" style="padding: 20px 30px;">
					<div
						@click="$router.push('/wasteGas/onlineSurveyDet?outletId='+item.outletId)">
						<div class="mb10 displayFlexBet">
							<div>
								<span class="mr10">{{item.outletName}}（{{item.monitorName}}）</span>
								<span class="mr10">
									<el-tag v-if="item.onlineStatusStr == '在线'" type="success"
										size="mini">{{item.onlineStatusStr}}</el-tag>
									<el-tag v-else type="warning" size="mini">{{item.onlineStatusStr}}</el-tag>
								</span>
							</div>
							<div style="color: #888;font-size: 12px;">{{item.latestTime}}</div>
						</div>
					
						<div>
							<div class="displayFlex">
								<div v-if="item.pollutionList && item.pollutionList.length > 0" class="displayFlex"
									style="width: calc(100% - 238px);overflow-x: auto;">
									<div v-for="(item2,index2) in item.pollutionList" :key="index2"
										style="border: 1px solid #EDECF1;padding: 20px;width: 33.3%;" class="mr10 bra8">
										<div class="mb10 color888 font12">{{item2.pollutionName}}</div>
										<div>
											<span class="font18" v-if="item2.monitorType == 'CEMS'">{{item2.zsAmount}}</span>
											<span class="font18" v-else>{{item2.actualAmount}}</span>
											<span class="font12 color888">{{item2.unitValue}}</span>
										</div>
									</div>
								</div>
					
								<div style="background: #FFF3F3;padding: 20px 10px;width: 114px;" class="bra8 mr10">
									<div class="displayFlex mb10">
										<img src="@/assets/sIcon77.png" style="width: 20px;height: 20px;" class="mr5" />
										<span class="font13 color333">24小时</span>
										<span class="font13 color888">超标</span>
									</div>
									<div class="font18 textCenter" style="color: #D10633;">{{item.warningNum || '--'}}</div>
								</div>
					
								<div style="border: 1px solid#00C264;padding: 20px 10px;width: 114px;" class="bra8" v-if="item.qualifiedPercent >= 95">
									<div class="textCenter mb10">
										<span class="font13 color333">30天时段</span>
										<span class="font13 color888">达标</span>
									</div>
									<div class="font18 textCenter" style="color: #00C264;">{{item.qualifiedPercent || '--'}}</div>
								</div>
								<div style="border: 1px solid#FE4F00;padding: 20px 10px;width: 114px;" class="bra8" v-else>
									<div class="textCenter mb10">
										<span class="font13 color333">30天时段</span>
										<span class="font13 color888">达标</span>
									</div>
									<div class="font18 textCenter" style="color: #FE4F00;">{{item.qualifiedPercent || '--'}}</div>
								</div>
							</div>
						</div>
					</div>
					<!-- <div style="background: #FFFDEC;padding: 16px 28px;">
						<div>
							<span>7月22日 10:31</span>
							<span>VOCS 890</span>
						</div>
					</div> -->
				</div>
				
			</div>

			<div v-if="selectItem && selectItem.code" style="flex: 1;" class=" ml10">
				<div style="padding: 10px;border: 1px solid#f5f5f5;" class="bgfff mb10 bra8">
					<div class="mb10">{{selectItem.label}}</div>
					<div class="displayFlexBet mb10">
						<div style="flex: 1;background: #F6F7FB;" class="pad10 bra8 mr10">
							<div class="mb5 font16">{{dataList.onlineNum}}</div>
							<div><el-progress :percentage="(dataList.onlineNum/dataList.totalNum)*100"
									:show-text="false"></el-progress></div>
							<div class="font12 color555 mt5">
								<span>在线设备·共{{dataList.totalNum}}台</span>
							</div>
						</div>
						<div style="flex: 1;background: #F6F7FB;" class="pad10 bra8 mr10">
							<div class="mb17 font16">{{dataList.mnDataNum}}</div>
							<div class="font12 color555">近30天小时数据</div>
						</div>
					</div>

					<div class="mb10 displayFlex">
						<img src="@/assets/sIcon101.png" style="width: 10px;height: 15px;" />
						<span style="color:#555;margin-left:10px" class="font13">达标率</span>
					</div>

					<div class="displayFlexBet mb10">
						<div style="width:calc(33.3% - 10px);position:relative" class="textCenter">
							<el-progress type="circle" :percentage="dataList.hourQPercent" color="#3A3EF4" :width="80"
								:show-text="false" fillColor="#9CEAB4"></el-progress>
							<div style="position:absolute;left:0;right:0;top:0;padding:20px">
								<div class="font20 color333">{{dataList.hourQPercent}}%</div>
								<div class="font13 color333 mt2">24h</div>
							</div>
						</div>

						<div style="width:calc(33.3% - 10px);position:relative" class="textCenter">
							<el-progress type="circle" :percentage="dataList.dayQPercent" color="#3A3EF4" :width="80"
								:show-text="false" fillColor="#9CEAB4"></el-progress>
							<div style="position:absolute;left:0;right:0;top:0;padding:20px">
								<div class="font20 color333">{{dataList.dayQPercent}}%</div>
								<div class="font13 color333 mt2">30天</div>
							</div>
						</div>

						<div style="width:calc(33.3% - 10px);position:relative" class="textCenter">
							<el-progress type="circle" :percentage="dataList.yearQPercent" color="#3A3EF4" :width="80"
								:show-text="false" fillColor="#9CEAB4"></el-progress>
							<div style="position:absolute;left:0;right:0;top:0;padding:20px">
								<div class="font20 color333">{{dataList.yearQPercent}}%</div>
								<div class="font13 color333 mt2">年度</div>
							</div>
						</div>
					</div>

					<div id="barChart1" style="width: 100%;height: 200px" class="mb20"></div>

					<div class="mb10 bra8" style="border: 1px solid#EDECF1" v-if="dataList.offlineList">
						<div class="displayFlexBet pad10" style="background: #F6F7FB;">
							<div class="displayFlex">
								<img src="@/assets/sIcon100.png" style="width: 15px;height: 15px;" />
								<span class="ml20">离线设备</span>
							</div>
							<div>{{dataList.offlineList.length}}</div>
						</div>
						<div style="background: #fff;">
							<div v-for="(item,index) in dataList.offlineList" class="font12"
								style="padding: 10px;border-bottom: 1px solid#EDECF1">
								<div>{{item.outletName}}</div>
								<!-- <div class="font10 color-info mt5" style="color: #999xz;">{{item.createTime}}</div> -->
							</div>
							<div v-if="dataList.offlineList.length == 0" class="textCenter font10 color888 pad20">
								暂无离线设备
							</div>
						</div>
					</div>

					<div class="mb10 bra8" style="border: 1px solid#EDECF1" v-if="dataList.warningBaseList">
						<div class="displayFlexBet pad10" style="background: #F6F7FB;">
							<div class="displayFlex">
								<img src="@/assets/sIcon103.png" style="width: 15px;height: 15px;" />
								<span class="ml20">高频问题点位</span>
							</div>
							<div>{{dataList.warningBaseList.length}}</div>
						</div>
						<div style="background: #fff;">
							<div v-for="(item,index) in dataList.warningBaseList" class="font12 displayFlexBet"
								style="padding: 10px;border-bottom: 1px solid#EDECF1">
								<div>{{item.outletName}}</div>
								<div>{{item.warningNum}}</div>
							</div>
							<div v-if="dataList.warningBaseList.length == 0" class="textCenter font10 color888 pad20">
								暂无预警
							</div>
						</div>
					</div>

					<div class="mb10 bra8" style="border: 1px solid#EDECF1" v-if="dataList.goingWarningList">
						<div class="displayFlexBet pad10" style="background: #F6F7FB;">
							<div class="displayFlex">
								<img src="@/assets/sIcon104.png" style="width: 15px;height: 15px;" />
								<span class="ml20">预警未处理</span>
							</div>
							<div>{{dataList.goingWarningList.length}}</div>
						</div>
						<div style="background: #fff;">
							<div v-for="(item,index) in dataList.goingWarningList" class="font12 point"
								style="padding: 10px;border-bottom: 1px solid#EDECF1"
								@click="$router.push('/wasteGas/warningCenterDet?id='+item.id)">
								<div>{{item.problemContent}}</div>
								<div class="font10 color-info mt5" style="color: #999xz;">{{item.createTime}}</div>
							</div>
							<div v-if="dataList.goingWarningList.length == 0" class="textCenter font10 color888 pad20">
								暂无预警
							</div>
						</div>
					</div>

					<div class="mb10 bra8" style="border: 1px solid#EDECF1" v-if="dataList.completeWarningList">
						<div class="displayFlexBet pad10" style="background: #F6F7FB;">
							<div class="displayFlex">
								<img src="@/assets/sIcon104.png" style="width: 15px;height: 15px;" />
								<span class="ml20">处理关闭预警</span>
							</div>
							<div>{{dataList.completeWarningList.length}}</div>
						</div>
						<div style="background: #fff;">
							<div v-for="(item,index) in dataList.completeWarningList" class="font12 point"
								style="padding: 10px;border-bottom: 1px solid#EDECF1"
								@click="$router.push('/wasteGas/warningCenterDet?id='+item.id)">
								<div>{{item.problemContent}}</div>
								<div class="font10 color-info mt5" style="color: #999xz;">{{item.createTime}}</div>
							</div>
							<div v-if="dataList.completeWarningList.length == 0" class="textCenter font10 color888 pad20">
								暂无预警
							</div>
						</div>
					</div>
				</div>
			</div>

			<div v-else style="flex: 1;" class=" ml10">
				<div style="padding: 10px;border: 1px solid#f5f5f5;" class="bgfff mb10 bra8">
					<div class="mb10 color555">概况</div>
					<div class="displayFlex" style="flex-wrap: wrap;">
						<div style="width:calc(33.3% - 10px);background: #F6F7FB;" class="pad10 bra8 mr10 mb10">
							<div class="mb5 font16">{{dataList3.totalNum}}</div>
							<div class="font12 color555">设备</div>
						</div>
						<div style="width:calc(33.3% - 10px);background: #F6F7FB;" class="pad10 bra8 mr10 mb10"
							v-for="(item,index) in dataList3.typeList" :key="index">
							<div class="mb5 font16">{{item.num}}</div>
							<div class="font12 color555">{{item.name}}</div>
						</div>
						<div style="width:calc(33.3% - 10px);background: #F6F7FB;" class="pad10 bra8 mr10 mb10">
							<div class="mb5 font16">{{dataList3.mnDataNum}}</div>
							<div class="font12 color555">近30天数据</div>
						</div>
						<div style="width:calc(33.3% - 10px);background: #F6F7FB;" class="pad10 bra8 displayFlexBet mb10">
							<div>
								<div class="mb5 font16">{{dataList3.qMnDataPercent}}%</div>
								<div class="font12 color555">达标率</div>
							</div>
							<div style="position: relative;">
								<el-progress type="circle" :percentage="dataList3.qMnDataPercent" color="#3A3EF4" :width="40"
									:stroke-width="4" :show-text="false" fillColor="#9CEAB4"></el-progress>
								<img src="@/assets/sIcon101.png"
									style="width: 15px;height: 20px;position: absolute;left: 12.5px; top: 10px;" />
							</div>
						</div>
					</div>

					<!-- <div style="background: #F6F7FB;" class="pad10 bra8 mt10 displayFlexBet">
						<div class="displayFlex">
							<img src="@/assets/sIcon100.png" style="width: 15px;height: 15px;" />
							<span class="mr10 ml10 font12">离线设备</span>
						</div>
						<span>{{dataList3.offlineNum}}</span>
					</div> -->
					
					<div class="mb10 bra8" v-if="dataList3 && dataList3.offlineList">
						<div class="displayFlexBet pad10" style="background: #F6F7FB;">
							<div class="displayFlex">
								<img src="@/assets/sIcon100.png" style="width: 15px;height: 15px;" />
								<span class="ml20">离线设备</span>
							</div>
							<div>{{dataList3.offlineList.length}}</div>
						</div>
						<div style="background: #fff;">
							<div v-for="(item,index) in dataList3.offlineList" class="font12"
								style="padding: 10px;border-bottom: 1px solid#EDECF1">
								<div>{{item.outletName}}</div>
								<!-- <div class="font10 color-info mt5" style="color: #999xz;">{{item.createTime}}</div> -->
							</div>
							<div v-if="dataList3.offlineList.length == 0" class="textCenter font10 color888 pad20">
								暂无离线设备
							</div>
						</div>
					</div>
				</div>

				<div style="padding: 10px;border: 1px solid#f5f5f5;" class="bgfff mb10 bra8">
					<div class="mb10 color555">CEMS</div>
					<div class="displayFlexBet mb10">
						<div style="flex: 1;background: #F6F7FB;" class="pad10 bra8 mr10">
							<div class="mb5 font16">{{dataList2.onlineNum}}</div>
							<div><el-progress :percentage="(dataList2.onlineNum/dataList2.totalNum)*100"
									:show-text="false"></el-progress></div>
							<div class="font12 color555 mt5">
								<span>在线设备·共{{dataList2.totalNum}}台</span>
							</div>
						</div>
						<div style="flex: 1;background: #F6F7FB;" class="pad10 bra8 mr10">
							<div class="mb5 font16">{{dataList2.mnDataNum}}</div>
							<div class="font12 color555">近30天小时数据</div>
						</div>
						<div style="flex: 1;background: #F6F7FB;" class="pad10 bra8 displayFlexBet">
							<div>
								<div class="mb5 font16">{{dataList2.yearQPercent}}%</div>
								<div class="font12 color555">达标率</div>
							</div>
							<div style="position: relative;">
								<el-progress type="circle" :percentage="dataList2.yearQPercent" color="#3A3EF4" :width="40"
									:stroke-width="4" :show-text="false" fillColor="#9CEAB4"></el-progress>
								<img src="@/assets/sIcon101.png"
									style="width: 15px;height: 20px;position: absolute;left: 12.5px; top: 10px;" />
							</div>
						</div>
					</div>

					<div class="mb10 bra8" style="border: 1px solid#EDECF1" v-if="dataList2.goingWarningList">
						<div class="displayFlexBet pad10" style="background: #F6F7FB;">
							<div class="displayFlex">
								<img src="@/assets/sIcon104.png" style="width: 15px;height: 15px;" />
								<span class="ml20">预警未处理</span>
							</div>
							<div>{{dataList2.goingWarningList.length}}</div>
						</div>
						<div style="background: #fff;">
							<div v-for="(item,index) in dataList2.goingWarningList" class="font12 point"
								style="padding: 10px;border-bottom: 1px solid#EDECF1"
								@click="$router.push('/wasteGas/warningCenterDet?id='+item.id)">
								<div>{{item.problemContent}}</div>
								<div class="font10 color-info mt5" style="color: #999xz;">{{item.createTime}}</div>
							</div>
							<div v-if="dataList2.goingWarningList.length == 0" class="textCenter font10 color888 pad20">
								暂无预警
							</div>
						</div>
					</div>

					<div class="mb10 bra8" style="border: 1px solid#EDECF1" v-if="dataList2.warningBaseList">
						<div class="displayFlexBet pad10" style="background: #F6F7FB;">
							<div class="displayFlex">
								<img src="@/assets/sIcon103.png" style="width: 15px;height: 15px;" />
								<span class="ml20">高频问题点位</span>
							</div>
							<div>{{dataList2.warningBaseList.length}}</div>
						</div>
						<div style="background: #fff;">
							<div v-for="(item,index) in dataList2.warningBaseList" class="font12 displayFlexBet"
								style="padding: 10px;border-bottom: 1px solid#EDECF1">
								<div>{{item.outletName}}</div>
								<div>{{item.warningNum}}</div>
							</div>
							<div v-if="dataList2.warningBaseList.length == 0" class="textCenter font10 color888 pad20">
								暂无预警
							</div>
						</div>
					</div>
				</div>

				<div style="padding: 10px;border: 1px solid#f5f5f5;" class="bgfff mb10 bra8">
					<div class="mb10 color555">TSP</div>
					<div class="displayFlexBet mb10">
						<div style="flex: 1;background: #F6F7FB;" class="pad10 bra8 mr10">
							<div class="mb5 font16">{{dataList4.onlineNum}}</div>
							<div><el-progress :percentage="(dataList4.onlineNum/dataList4.totalNum)*100"
									:show-text="false"></el-progress></div>
							<div class="font12 color555 mt5">
								<span>在线设备·共{{dataList4.totalNum}}台</span>
							</div>
						</div>
						<div style="flex: 1;background: #F6F7FB;" class="pad10 bra8 mr10">
							<div class="mb5 font16">{{dataList4.mnDataNum}}</div>
							<div class="font12 color555">近30天小时数据</div>
						</div>
						<div style="flex: 1;background: #F6F7FB;" class="pad10 bra8 displayFlexBet">
							<div>
								<div class="mb5 font16">{{dataList4.yearQPercent}}%</div>
								<div class="font12 color555">达标率</div>
							</div>

							<div style="position: relative;">
								<el-progress type="circle" :percentage="dataList4.yearQPercent" color="#3A3EF4" :width="40"
									:stroke-width="4" :show-text="false" fillColor="#9CEAB4"></el-progress>
								<img src="@/assets/sIcon101.png"
									style="width: 15px;height: 20px;position: absolute;left: 12.5px; top: 10px;" />
							</div>
						</div>
					</div>

					<div class="mb10 bra8" style="border: 1px solid#EDECF1" v-if="dataList4.goingWarningList">
						<div class="displayFlexBet pad10" style="background: #F6F7FB;">
							<div class="displayFlex">
								<img src="@/assets/sIcon104.png" style="width: 15px;height: 15px;" />
								<span class="ml20">预警未处理</span>
							</div>
							<div>{{dataList4.goingWarningList.length}}</div>
						</div>
						<div style="background: #fff;">
							<div v-for="(item,index) in dataList4.goingWarningList" class="font12"
								style="padding: 10px;border-bottom: 1px solid#EDECF1">
								<div>{{item.problemContent}}</div>
								<div class="font10 color-info mt5" style="color: #999xz;">{{item.createTime}}</div>
							</div>
							<div v-if="dataList4.goingWarningList.length == 0" class="textCenter font10 color888 pad20">
								暂无预警
							</div>
						</div>
					</div>

					<div class="mb10 bra8" style="border: 1px solid#EDECF1" v-if="dataList4.warningBaseList">
						<div class="displayFlexBet pad10" style="background: #F6F7FB;">
							<div class="displayFlex">
								<img src="@/assets/sIcon103.png" style="width: 15px;height: 15px;" />
								<span class="ml20">高频问题点位</span>
							</div>
							<div>{{dataList4.warningBaseList.length}}</div>
						</div>
						<div style="background: #fff;">
							<div v-for="(item,index) in dataList4.warningBaseList" class="font12 displayFlexBet"
								style="padding: 10px;border-bottom: 1px solid#EDECF1">
								<div>{{item.outletName}}</div>
								<div>{{item.warningNum}}</div>
							</div>
							<div v-if="dataList4.warningBaseList.length == 0" class="textCenter font10 color888 pad20">
								暂无预警
							</div>
						</div>
					</div>
				</div>

				<div style="padding: 10px;border: 1px solid#f5f5f5;" class="bgfff mb10 bra8">
					<div class="mb10 color555">空气微站</div>
					<div class="displayFlexBet mb10">
						<div style="flex: 1;background: #F6F7FB;" class="pad10 bra8 mr10">
							<div class="mb5 font16">{{dataList5.onlineNum}}</div>
							<div><el-progress :percentage="(dataList5.onlineNum/dataList5.totalNum)*100"
									:show-text="false"></el-progress></div>
							<div class="font12 color555 mt5">
								<span>在线设备·共{{dataList5.totalNum}}台</span>
							</div>
						</div>
						<div style="flex: 1;background: #F6F7FB;" class="pad10 bra8 mr10">
							<div class="mb5 font16">{{dataList5.mnDataNum}}</div>
							<div class="font12 color555">近30天小时数据</div>
						</div>
						<div style="flex: 1;background: #F6F7FB;" class="pad10 bra8 displayFlexBet">
							<div>
								<div class="mb5 font16">{{dataList5.yearQPercent}}%</div>
								<div class="font12 color555">达标率</div>
							</div>

							<div style="position: relative;">
								<el-progress type="circle" :percentage="dataList5.yearQPercent" color="#3A3EF4" :width="40"
									:stroke-width="4" :show-text="false" fillColor="#9CEAB4"></el-progress>
								<img src="@/assets/sIcon101.png"
									style="width: 15px;height: 20px;position: absolute;left: 12.5px; top: 10px;" />
							</div>
						</div>
					</div>

					<div class="mb10 bra8" style="border: 1px solid#EDECF1" v-if="dataList5.goingWarningList">
						<div class="displayFlexBet pad10" style="background: #F6F7FB;">
							<div class="displayFlex">
								<img src="@/assets/sIcon104.png" style="width: 15px;height: 15px;" />
								<span class="ml20">预警未处理</span>
							</div>
							<div>{{dataList5.goingWarningList.length}}</div>
						</div>
						<div style="background: #fff;">
							<div v-for="(item,index) in dataList5.goingWarningList" class="font12 point"
								style="padding: 10px;border-bottom: 1px solid#EDECF1"
								@click="$router.push('/wasteGas/warningCenterDet?id='+item.id)">
								<div>{{item.problemContent}}</div>
								<div class="font10 color-info mt5" style="color: #999xz;">{{item.createTime}}</div>
							</div>
							<div v-if="dataList5.goingWarningList.length == 0" class="textCenter font10 color888 pad20">
								暂无预警
							</div>
						</div>
					</div>

					<div class="mb10 bra8" style="border: 1px solid#EDECF1" v-if="dataList5.warningBaseList">
						<div class="displayFlexBet pad10" style="background: #F6F7FB;">
							<div class="displayFlex">
								<img src="@/assets/sIcon103.png" style="width: 15px;height: 15px;" />
								<span class="ml20">高频问题点位</span>
							</div>
							<div>{{dataList5.warningBaseList.length}}</div>
						</div>
						<div style="background: #fff;">
							<div v-for="(item,index) in dataList5.warningBaseList" class="font12 displayFlexBet"
								style="padding: 10px;border-bottom: 1px solid#EDECF1">
								<div>{{item.outletName}}</div>
								<div>{{item.warningNum}}</div>
							</div>
							<div v-if="dataList5.warningBaseList.length == 0" class="textCenter font10 color888 pad20">
								暂无预警
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';

	import moment from 'moment'
	import elProgress from '@/components/progress'

	let that
	export default {
		name: "onlineSurveyPreview",
		components: {
			elProgress
		},
		data() {
			return {
				value: '',
				monitorType: '',
				loading: true,
				dataList: {},
				dataList1: [],
				dataList2: {},
				dataList3: {
					typeList: []
				},
				dataList4: {},
				dataList5: {},
				selectItem: {
					code: '',
					label: ''
				}
			}
		},
		created: function() {},
		mounted: function() {
			that = this
			that.getGasMonitorSummary()

			that.getGasOnlineLatestMonitorList()
		},
		methods: {

			formcategory(charyId, xAxisData, seriesData) {
				var chartDom = document.getElementById(charyId);
				var myChart = echarts.init(chartDom);
				var option;

				option = {
					grid: {
						top: "12%",
						bottom: "10%",
						left: "5%"
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: xAxisData,
						splitLine: {
							show: false,
						},
						axisTick: {
							show: false // 不显示坐标轴刻度线
						},
						axisLine: {
							lineStyle: {
								opacity: 0 //将y轴刻度线的opacity属性设置为0，即为隐藏刻度线
							}
						},
					},
					yAxis: {
						type: 'value',
						splitLine: {
							show: false,
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: ["#FAFBFC"],
							},
						},
						axisLabel: {
							//y轴文字的配置
							textStyle: {
								color: "rgba(215, 215, 215, 1)",
							},
							// formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
						},
						axisLine: {
							lineStyle: {
								opacity: 0 //将y轴刻度线的opacity属性设置为0，即为隐藏刻度线
							}
						},
					},
					series: [{
						data: seriesData,
						type: 'line',
						label: {
							show: true,
							position: 'top'
						}
					}]
				};

				option && myChart.setOption(option);

			},

			//统计监测设备概览
			getGasMonitorSummary() {
				that.ajax({
					url: '/gasOutlet/getGasMonitorSummary',
					data: {
						monitorType: that.monitorType
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						that.dataList3 = result.data
						//that.selectItem = result.data.typeList[0]
						that.getGasMonitorDet()
					},
				})
			},

			formLineChart() {
				let xAxisData = []
				let seriesData = []
				for (let item of that.dataList.dayPercentList) {
					xAxisData.push(item.shortCreateTimeStr)
					seriesData.push(item.qualifiedPercent)
				}
				console.log(xAxisData, seriesData)
				setTimeout(function() {
					that.formcategory("barChart1", xAxisData, seriesData)
				}, 500);
			},

			getGasMonitorDet: function(value) {
				that.ajax({
					url: '/gasOutlet/getGasMonitorDet',
					data: {
						monitorType: "CEMS"
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						that.dataList2 = result.data


					}
				})

				that.ajax({
					url: '/gasOutlet/getGasMonitorDet',
					data: {
						monitorType: "TSP"
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						that.dataList4 = result.data
					}
				})

				that.ajax({
					url: '/gasOutlet/getGasMonitorDet',
					data: {
						monitorType: "AIR_SITE"
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						that.dataList5 = result.data
					}
				})
			},

			getGasOnlineLatestMonitorList: function(value) {
				that.loading = true
				that.ajax({
					url: '/gasOutlet/getGasOnlineLatestMonitorList',
					data: JSON.stringify({
						monitorType: that.selectItem.code
					}),
					contentType: 'application/json',
					success: function(result) {
						that.dataList1 = result.data
						that.loading = false
					}
				})
			},

		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.selected {
		color: #3A3EF4;
	}

	.selectedBorder {
		border-bottom: 1px solid#3A3EF4;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 2px;
	}
	
	.el-tag.el-tag--success{
		background: #8DE5A8;
		color: #333;
	}
</style>